<template>
 <slider width="100%"
        height="150px"
        animation="fade"
        :interval="1000"
        :speed="2000">
  <slider-item>
      <div class="slide_img">
        <img src="../img/banner.png">
      </div>
  </slider-item>
  <slider-item>
     <div class="slide_img">
        <img src="../img/list_bg.png">
      </div>
  </slider-item>
</slider>
</template>

<script>
import { Slider, SliderItem } from 'vue-easy-slider'
    export default {
        name: 'carousel',
        components: {
           Slider,
           SliderItem
        },
           }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .slide_img{
    img{
      width:100%;
      height:100%;
    }
  }
  .slider-item{ height:150px;}
</style>
